<template>
	<map class="map" :longitude="longitude" :latitude="latitude" :markers="markers" @markertap="onMarkertap"></map>

	<view class="btn-group">
		<button type="primary" @click="onJump">发布</button>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { getTradeList, type Trade } from '../../api';
	import { useLocation } from '../../hooks/use-location';

	const { longitude, latitude } = useLocation()

	// 交易数据，后端接口返回的
	const trades = ref<Trade[]>([])

	const markers = computed(() => {
		return trades.value.map(item => ({
			...item,
			// id: item.id + 100,
			latitude: item.lat,
			longitude: item.lng,
			width: 30,
			height: 30,
			// 图标的地址
			iconPath: `/static/icon_${item.type}.png`
		}))
	})

	function onMarkertap(event : { detail : { markerId : number }; }) {
		// console.log('onMarkertap', event)
		// 1. 获取标记点的Id，该Id就是交易的id
		const id = event.detail.markerId
		// 2. 跳转到详情页面
		uni.navigateTo({
			url: "/pages/info/info?id=" + id,
			// 数据通道的自定义事件
			events: {

			}
		})
	}

	/**
	 * 跳转去发布页面
	 */
	function onJump() {
		uni.navigateTo({
			url: "/pages/publish/publish",
			events: {
				"success": () => {
					// 重新调用接口
					refresh()
				}
			}
		})
	}
	
		
	function refresh() {
		getTradeList().then(result => {
			// console.log(result, 'result')
			trades.value = result
		})
	}

	refresh()
</script>

<style lang="scss">
	.map {
		width: 100%;
		height: 100vh;
	}

	.btn-group {
		position: fixed;
		left: 0;
		// bottom: env(safe-area-inset-bottom, 0);
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ccc;
	}
</style>